<template>
  <view class="baby-info-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部区域 -->
    <view class="header">
      <view class="header-back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">{{ isEdit ? '编辑宝宝信息' : '添加宝宝信息' }}</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 头像区域 -->
      <view class="avatar-section">
        <view class="avatar-container" @tap="chooseImage">
          <image 
            v-if="formData.avatar" 
            class="avatar" 
            :src="formData.avatar" 
            mode="aspectFill"
          ></image>
          <view v-else class="avatar-placeholder">
            <text class="placeholder-icon">📷</text>
            <text class="placeholder-text">添加头像</text>
          </view>
        </view>
      </view>
      
      <!-- 基础信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">基本信息</text>
        </view>
        
        <view class="form-item">
          <text class="form-label required">宝宝昵称</text>
          <input 
            class="form-input" 
            placeholder="请输入宝宝昵称" 
            v-model="formData.name"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label required">性别</text>
          <view class="gender-selector">
            <view 
              class="gender-option" 
              :class="{ active: formData.gender === '男' }"
              @tap="formData.gender = '男'"
            >
              <text class="gender-icon male">♂</text>
              <text class="gender-text">男宝宝</text>
            </view>
            <view 
              class="gender-option" 
              :class="{ active: formData.gender === '女' }"
              @tap="formData.gender = '女'"
            >
              <text class="gender-icon female">♀</text>
              <text class="gender-text">女宝宝</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label required">出生日期</text>
          <view class="date-picker" @tap="showDatePicker = true">
            <text v-if="formData.dob" class="selected-date">{{ formData.dob }}</text>
            <text v-else class="date-placeholder">请选择出生日期</text>
            <text class="date-arrow">▼</text>
          </view>
        </view>
      </view>
      
      <!-- 身体数据 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">身体测量</text>
          <text class="section-desc">记录宝宝的最新测量数据</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">体重 (kg)</text>
          <input 
            class="form-input" 
            placeholder="请输入体重" 
            v-model="formData.weight"
            type="digit"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">身高 (cm)</text>
          <input 
            class="form-input" 
            placeholder="请输入身高" 
            v-model="formData.height"
            type="digit"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">头围 (cm)</text>
          <input 
            class="form-input" 
            placeholder="请输入头围" 
            v-model="formData.head"
            type="digit"
          />
        </view>
      </view>
      
      <!-- 其他信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">其他信息</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">血型</text>
          <picker 
            @change="bloodTypeChange" 
            :value="bloodTypeIndex" 
            :range="bloodTypeOptions"
          >
            <view class="picker-view">
              <text v-if="formData.bloodType" class="picker-text">{{ formData.bloodType }}</text>
              <text v-else class="picker-placeholder">请选择血型</text>
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">过敏史</text>
          <textarea 
            class="form-textarea" 
            placeholder="若有过敏情况，请在此记录" 
            v-model="formData.allergy"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="footer">
      <button class="save-btn" @tap="saveInfo">保存</button>
      <button v-if="isEdit" class="delete-btn" @tap="confirmDelete">删除</button>
    </view>
    
    <!-- 日期选择器弹窗 -->
    <view class="date-picker-modal" v-if="showDatePicker">
      <view class="date-picker-mask" @tap="showDatePicker = false"></view>
      <view class="date-picker-content">
        <view class="picker-header">
          <text @tap="showDatePicker = false">取消</text>
          <text>选择出生日期</text>
          <text @tap="confirmDate">确定</text>
        </view>
        <picker-view 
          class="date-picker-view" 
          :indicator-style="'height: 50px;'" 
          :value="datePickerValue"
          @change="datePickerChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(year, index) in years" :key="'year-' + index">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(month, index) in months" :key="'month-' + index">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(day, index) in days" :key="'day-' + index">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 获取状态栏高度
const statusBarHeight = ref(20);

// 判断是否为编辑模式
const isEdit = ref(false);

// 表单数据
const formData = reactive({
  avatar: '',
  name: '',
  gender: '',
  dob: '',
  weight: '',
  height: '',
  head: '',
  bloodType: '',
  allergy: ''
});

// 血型选项
const bloodTypeOptions = ['A型', 'B型', 'AB型', 'O型', '未知'];
const bloodTypeIndex = ref(4);  // 默认为未知

// 日期选择器相关
const showDatePicker = ref(false);
const datePickerValue = ref([5, 0, 0]);  // 默认选中今年、1月、1日
const tempDate = ref({ year: new Date().getFullYear(), month: 1, day: 1 });

// 构建年月日选项
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 20 }, (_, i) => currentYear - i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = computed(() => {
  const daysInMonth = new Date(tempDate.value.year, tempDate.value.month, 0).getDate();
  return Array.from({ length: daysInMonth }, (_, i) => i + 1);
});

// 血型选择变更
const bloodTypeChange = (e) => {
  bloodTypeIndex.value = e.detail.value;
  formData.bloodType = bloodTypeOptions[bloodTypeIndex.value];
};

// 日期选择器变更
const datePickerChange = (e) => {
  const values = e.detail.value;
  tempDate.value.year = years[values[0]];
  tempDate.value.month = months[values[1]];
  tempDate.value.day = days.value[values[2]] || 1;
  
  datePickerValue.value = values;
};

// 确认日期选择
const confirmDate = () => {
  formData.dob = `${tempDate.value.year}-${tempDate.value.month.toString().padStart(2, '0')}-${tempDate.value.day.toString().padStart(2, '0')}`;
  showDatePicker.value = false;
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      formData.avatar = res.tempFilePaths[0];
    }
  });
};

// 返回函数
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.navigateTo({
        url: '/auntMom/pages/home/home'
      });
    }
  });
};

// 检查必填项
const validateForm = () => {
  if (!formData.name.trim()) {
    uni.showToast({
      title: '请输入宝宝昵称',
      icon: 'none'
    });
    return false;
  }
  
  if (!formData.gender) {
    uni.showToast({
      title: '请选择宝宝性别',
      icon: 'none'
    });
    return false;
  }
  
  if (!formData.dob) {
    uni.showToast({
      title: '请选择出生日期',
      icon: 'none'
    });
    return false;
  }
  
  return true;
};

// 保存信息
const saveInfo = () => {
  if (!validateForm()) return;
  
  // 保存到本地存储
  uni.setStorageSync('babyInfo', JSON.stringify(formData));
  
  uni.showToast({
    title: '保存成功',
    icon: 'success',
    success: () => {
      setTimeout(() => {
        goBack();
      }, 1500);
    }
  });
};

// 删除确认
const confirmDelete = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除宝宝信息吗？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('babyInfo');
        uni.showToast({
          title: '已删除',
          icon: 'success',
          success: () => {
            setTimeout(() => {
              goBack();
            }, 1500);
          }
        });
      }
    }
  });
};

// 页面加载
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 判断是否为编辑模式
  const storedBabyInfo = uni.getStorageSync('babyInfo');
  if (storedBabyInfo) {
    const babyData = JSON.parse(storedBabyInfo);
    Object.assign(formData, babyData);
    isEdit.value = true;
    
    // 设置血型索引
    if (formData.bloodType) {
      const index = bloodTypeOptions.findIndex(type => type === formData.bloodType);
      bloodTypeIndex.value = index >= 0 ? index : 4;
    }
    
    // 设置日期选择器初始值
    if (formData.dob) {
      const parts = formData.dob.split('-');
      const year = parseInt(parts[0]);
      const month = parseInt(parts[1]);
      const day = parseInt(parts[2]);
      
      tempDate.value = { year, month, day };
      
      const yearIndex = years.findIndex(y => y === year);
      const monthIndex = months.findIndex(m => m === month);
      const dayIndex = days.value.findIndex(d => d === day);
      
      datePickerValue.value = [
        yearIndex >= 0 ? yearIndex : 0,
        monthIndex >= 0 ? monthIndex : 0,
        dayIndex >= 0 ? dayIndex : 0
      ];
    }
  }
});
</script>

<style lang="scss" scoped>
.baby-info-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
  padding-bottom: 40rpx;
}

.status-bar {
  width: 100%;
  background-color: transparent;
}

.header {
  height: 90rpx;
  background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  position: relative;
  
  .header-back {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .header-title {
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    flex: 1;
    text-align: center;
  }
  
  .header-right {
    width: 50rpx;
  }
}

.form-container {
  padding: 16rpx 24rpx 120rpx;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
  
  .avatar-container {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.2);
    
    .avatar {
      width: 100%;
      height: 100%;
    }
    
    .avatar-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .placeholder-icon {
        font-size: 44rpx;
        color: #999;
        margin-bottom: 4rpx;
      }
      
      .placeholder-text {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.form-section {
  background-color: #fff;
  border-radius: 16px;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 16rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      display: block;
    }
    
    .section-desc {
      font-size: 22rpx;
      color: #999;
      margin-top: 4rpx;
      display: block;
    }
  }
  
  .form-item {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .form-label {
      font-size: 26rpx;
      color: #333;
      margin-bottom: 8rpx;
      display: block;
      
      &.required:after {
        content: "*";
        color: #f5222d;
        margin-left: 6rpx;
      }
    }
    
    .form-input {
      width: 100%;
      height: 70rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 0 16rpx;
      font-size: 26rpx;
      color: #333;
      box-sizing: border-box;
    }
    
    .form-textarea {
      width: 100%;
      height: 140rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 16rpx;
      font-size: 26rpx;
      color: #333;
      box-sizing: border-box;
    }
    
    .date-picker {
      width: 100%;
      height: 70rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      
      .selected-date {
        font-size: 26rpx;
        color: #333;
      }
      
      .date-placeholder {
        font-size: 26rpx;
        color: #999;
      }
      
      .date-arrow {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .picker-view {
      width: 100%;
      height: 70rpx;
      background-color: #f5f7fa;
      border-radius: 8rpx;
      padding: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      
      .picker-text {
        font-size: 26rpx;
        color: #333;
      }
      
      .picker-placeholder {
        font-size: 26rpx;
        color: #999;
      }
      
      .picker-arrow {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .gender-selector {
      display: flex;
      gap: 16rpx;
      
      .gender-option {
        flex: 1;
        height: 90rpx;
        background-color: #f5f7fa;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        
        &.active {
          background: rgba(0, 122, 255, 0.05);
          border: 2rpx solid #007aff;
          
          .gender-text {
            color: #007aff;
          }
        }
        
        .gender-icon {
          font-size: 32rpx;
          margin-bottom: 4rpx;
          
          &.male {
            color: #007aff;
          }
          
          &.female {
            color: #eb2f96;
          }
        }
        
        .gender-text {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16rpx 24rpx calc(env(safe-area-inset-bottom) + 16rpx);
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 16rpx;
  
  .save-btn {
    flex: 2;
    height: 80rpx;
    background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 80rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
  }
  
  .delete-btn {
    flex: 1;
    height: 80rpx;
    background-color: #fff;
    color: #f5222d;
    border: 2rpx solid #f5222d;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 80rpx;
  }
}

.date-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .date-picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .date-picker-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      text {
        font-size: 28rpx;
        
        &:first-child {
          color: #999;
        }
        
        &:nth-child(2) {
          font-weight: bold;
          color: #333;
        }
        
        &:last-child {
          color: #007aff;
          font-weight: 500;
        }
      }
    }
    
    .date-picker-view {
      width: 100%;
      height: 400rpx;
    }
    
    .picker-item {
      line-height: 50px;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style> 